<template>
  <el-dialog v-model="visible" title="所属部门/人员" width="700" show-footer show-zoom resize @close="close" :close-on-click-modal="false">
    <template #default>
      <el-table :data="detail" border style="width: 100%" highlight-current-row height="400">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" :label="targetTitle" />
        <el-table-column prop="dept_name" label="所属部门" />
      </el-table>
    </template>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { kpiMember } from "../api/index"
import { reactive, ref, toRefs } from "vue"

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(["query"])

const data = reactive({
  detail: [],
})
const { detail } = toRefs(data)

const open = (id) => {
  visible.value = true
  if (id) getDetail(id)
}
const targetTitle = ref("")
const getDetail = async ({ id, target_type }) => {
  try {
    targetTitle.value = target_type == "1" ? "部门" : "人员"
    const res = await kpiMember({ id })
    detail.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const close = () => {
  visible.value = false
  detail.value = []
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
  }
}
</style>
